<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/static/jquery-ui-1.8.21.custom.css" />
    <link rel="stylesheet" href="/static/ui.multiselect.css" type="text/css">
    <script src='/static/jquery-1.7.2.min.js'></script>
    <script src='/static/jquery-ui-1.8.21.custom.min.js'></script>
    <script src='/static/ui.multiselect.js'></script>
    <script src='/static/rdm_tests.js'></script>
    <title>RDM Tests</title>
    <style type='text/css'>
      body {
        margin: 0px;
        padding: 0px;
        font-family: sans-serif;
        font-size: 13px;
      }

      table {
        font-family: sans-serif;
        font-size: 13px;
        padding: 0px;
        margin: 0px;
        border: 0px;
        border-spacing: 0px;
      }

      input { border: #e4e9fe 1px solid; }

      fieldset {
        border: #67a7e3 1px solid;
        margin: 0px;
        margin-bottom: 5px;
      }

      legend {
        font-weight: bold;
      }

      ul {
        padding-left: 20px;
        margin: 0px;
      }

      #header {
        margin: 0px;
        padding: 0px;
        padding-bottom: 10px;
        left: 0px;
        text-align: left;
        font-size: 11px;
      }

      #header img {
        vertical-align: bottom;
      }

      #main-title {
        font-weight: bold;
        font-size: 18px;
      }

      #footer {
        padding-top: 5px;
        text-align: center;
        clear: both;
        font-size: 11px;
      }

      /* Tables are used in various frames */
      .ola-table {
        width: 100%;
        border-bottom: 1px solid #e4e9fe;
      }

      .ola-table thead {
        text-align: left;
      }

      .ola-table td {
        border-top: 1px solid #e4e9fe;
      }

      .stats_by_catg {
        float: right;
        text-align: left;
        font-weight: bold;
        font-size: 13px;
      }

      .rdm-tests-selection-multiselect {
          width: 680px;
          height: 200px;
      }

      .test-state-passed {
        color: #0CAB1E;
      }

      .test-state-failed {
        color: #FA021F;
      }

      .test-state-broken {
        color: #707070;
      }

      .test-state-not_run {
        color: #2E2B2B;
      }

      #rdm-tests-dmx_options {
        display: none;
      }

      #rdm-tests-notification {
        text-align: center;
      }

      #rdm-tests-results {
        display: none;
        width: 100%;
        z-index: 1000;
        background-color: #FFF;
      }

      #rdm-tests-results-stats {
        width: 300px;
        text-align: center;
        margin: 0px auto;
      }

      #rdm-tests-results-stats-table {
        border: 1.0px dashed #67a7e3;
        margin: 0px auto;
        margin-top: 10px;
      }

      #rdm-tests-results-stats-table td {
        padding: 5px;
        text-align: center;
        font-weight: bold;
      }

      .rdm-tests-select {
        background-color: #fff;
        border: 1.0px solid #67a7e3;
      }

      .results_container {
        margin: 0px auto;
        width: 80%;
      }

      .results_container_border {
        border: 1.0px solid #67a7e3;
        margin: 0px auto;
        width: 80%;
      }

      .ola-expander legend {
        cursor: pointer;
      }

      .ola-expander div {
        display: none;
      }

      .ola-expander-collapsed img {
        background-image: url('/static/images/expander.png');
        background-position: -40px 0px;
      }

      .ola-expander-expanded img {
        background-image: url('/static/images/expander.png');
        background-position: 0px 0px;
      }

      #rdm-tests-results-list {
        margin-left: 20px;
        margin-bottom: 20px;
        border: 0px;
        border-top: 1.0px solid #67a7e3;
        border-bottom: 1.0px solid #67a7e3;
        background-color: #fff;
        width: 100%;
        margin: 0px auto;
        height: 200px;
      }

      #rdm-tests-results-list option {
        margin: 2px;
        font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: bold;
        background-color: #f8f8f8;
      }

      #rdm-tests-results-info {
        padding-top: 10px;
        height: 250px;
      }

      #rdm-tests-results-info-title {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
      }

      #rdm-tests-results-info-doc {
        text-align: center;
        font-style: italic;
        font-size: 14px;
        padding-bottom: 10px;
      }

      #rdm-tests-results-info-state {
        font-weight: bold;
      }

      #rdm-tests-results-info-catg {
        font-weight: bold;
      }

      #rdm-tests-results-info-debug {
        white-space: pre;
        font-family: monospace;
        height: 150px;
        width: 100%;
        overflow: auto;
      }

      .rdm-tests-results-button {
        padding-top: 10px;
        text-align: center;
      }

      .no-close .ui-dialog-titlebar-close {display: none }
    </style>
  </head>
  <body>
    <div id='header'>
      <div id='title'>
        <img src='/static/images/logo.png' width='111' height='48' alt='Logo'>
        <span id="main-title">RDM Responder Tests</span>
      </div>
    </div>
    <div id='tests_control_frame'>
      <fieldset>
       <legend>Universe</legend>
        <table>
          <tr>
            <td>
              <select id='universe_options'></select>
            </td>
          </tr>
        </table>
      </fieldset>
      <fieldset>
       <legend>Select Device</legend>
         <select id='devices_list'></select>
         <span id='rdm-discovery'><a href='#'><img id='rdm-discovery-button' alt='Run Discovery' src='/static/images/discovery.png' title='Run Full Discovery' /></a></span>
      </fieldset>
      <fieldset>
        <legend>Delay after sending broadcast SETs</legend>
           <input id='write_delay' maxlength='16' size='4' value='0'>
             milliseconds
      </fieldset>
      <fieldset>
       <legend>DMX Options</legend>
        <div>
          <input type='checkbox' id='rdm-tests-send_dmx_in_bg'>Send DMX in background?
        </div>
        <table id='rdm-tests-dmx_options' class='ola-table'>
         <tr>
          <td>DMX Frame rate (frames / second)
           <input id='dmx_frame_rate' maxlength='16' size='4' value='20'></td>
         </tr>
         <tr>
          <td>Number of Slots to Send
           <input id='slot_count' maxlength='3' size='4' value='128'></td>
         </tr>
        </table>
      </fieldset>
      <fieldset>
       <legend>Select Tests</legend>
				<form id='rdm-tests-selection'>
          <table class='ola-table'>
           <tr>
            <td>
              <input type='radio' name='rdm-tests-selection' id='rdm-tests-selection-subset' class='rdm-tests-selection' checked='checked' />Select Tests
            </td>
            <td>
              <select id='rdm-tests-selection-tests_list' class='rdm-tests-selection-multiselect' multiple='multiple' name='subset_test_defs'>
              </select>
            </td>
           </tr>
           <tr>
            <td>
              <input type='radio' name='rdm-tests-selection' id='rdm-tests-selection-previously_failed' class='rdm-tests-selection'/>Failed Tests
            </td>
            <td>
              <select id='rdm-tests-selection-failed_tests' class='rdm-tests-selection-multiselect' multiple='multiple' name='failed_test_defs'>
              </select>
            </td>
           </tr>
           <tr>
            <td colspan='2'>
              <p style='font-size: 12px'>Running tests will modify the settings for devices connected to this universe. Think twice about doing this on a production system.</p>
              <input type='button' name='rdm-tests-selection-run_tests' id='rdm-tests-selection-run_tests' value='Run Tests' />
            </td>
           </tr>
        </table>
			</form>
     </fieldset>
    </div>
    <div id='rdm-tests-results'>
      <div id='rdm-tests-results-stats'>
        Test results for: <span style='font-weight: bold' id="rdm-tests-results-uid"></span>
        <table id='rdm-tests-results-stats-table'>
          <tr>
            <td class='test-state-broken'>Broken</td>
            <td class='test-state-failed'>Failed</td>
            <td class='test-state-not_run'>Not Run</td>
            <td class='test-state-passed'>Passed</td>
            <td style='color: #000'>Total</td>
          </tr>
          <tr id='rdm-tests-results-stats-figures'>
          </tr>
        </table>
      </div>
      <div id='rdm-tests-results-summary-by_catg' class='results_container'>
        <fieldset class="ola-expander">
          <legend class="ola-expander-collapsed">
            <img src="/static/images/blank.gif" width="12" height="12">
          Results By Category
          </legend>
          <div>
           <ul id='rdm-tests-results-summary-by_catg-content'>
           </ul>
          </div>
        </fieldset>
      </div>
      <div id='rdm-tests-results-warnings' class='results_container'>
        <fieldset class="ola-expander">
          <legend class="ola-expander-collapsed">
            <img src="/static/images/blank.gif" width="12" height="12">
            Warnings (<span id="rdm-tests-results-warning-count"></span>)
          </legend>
          <div>
           <ul id='rdm-tests-results-warnings-content'></ul>
          </div>
        </fieldset>
      </div>
      <div id='rdm-tests-results-advisories' class='results_container'>
        <fieldset class="ola-expander">
          <legend class="ola-expander-collapsed">
            <img src="/static/images/blank.gif" width="12" height="12">
            Advisories (<span id="rdm-tests-results-advisory-count"></span>)
          </legend>
          <div>
            <ul id='rdm-tests-results-advisories-content'></ul>
          </div>
        </fieldset>
      </div>
      <div class='results_container_border'>
        <div style="padding: 5px">
          Test Category
          <select id='rdm-tests-results-summary-filter-by_catg' class='rdm-tests-select'>
          </select>,
          Result:
          <select id='rdm-tests-results-summary-filter-by_state' class='rdm-tests-select'>
            <option>All</option>
            <option class='test-state-passed'>Passed</option>
            <option class='test-state-failed'>Failed</option>
            <option class='test-state-broken'>Broken</option>
            <option class='test-state-not_run'>Not Run</option>
          </select>
        </div>
        <select id='rdm-tests-results-list' size='10'></select>
        <div id='rdm-tests-results-info'>
          <div id='rdm-tests-results-info-title'></div>
          <div id='rdm-tests-results-info-doc'></div>
          <div style="padding-left: 10px">
            Category: <span id='rdm-tests-results-info-catg'></span><br/>
            Result: <span id='rdm-tests-results-info-state'></span><br/>
            Debug Output:
          </div>
          <div id='rdm-tests-results-info-debug'></div>
        </div>
      </div>
      <div class='results_container rdm-tests-results-button'>
        <input id='rdm-tests-results-button-dismiss' type='button' value='Dismiss' />
        <input id='rdm-tests-results-button-run_again' type='button' value='Run Again' />
        <input id='rdm-tests-results-button-download' type='button' value='Download results' />
      </div>
    <div id='rdm-tests-notification'></div>

    <div id='footer'>
      OLA &copy; 2012 Ravindra Nath Kakarla<br>
    </div>
    <iframe id='rdm-tests-download' style='display: none'></iframe>
  </body>
</html>
